<template>
  <div class="userAddress">
    <div class="addressMain">
      <el-row :span="24" class="item"  v-for="item in addrList">
        <el-col :span="24" class="itemTop">
            <div class="itemTopLeft">{{item.name}}</div>
            <div class="itemTopContent"></div>
            <div>{{item.phone}}</div>
        </el-col>
        <el-col :span="24">{{item.province + item.city  + item.city + item.area + item.addr}}</el-col>
        <el-col :span="24"  class="itemFoot" v-bind:style="item.isDefault? '{ color: green }' : '{}'">
          <div class="itemFootLeft" v-if="item.isDefault"><i class="el-icon-circle-check green"></i> 默认地址</div>
          <div class="itemFootContent"></div>
          <div class="itemFootRight">
            <!-- <span><i class="el-icon-edit"></i> 编辑</span> -->
            <span @click="deleteAdd(item.id)"><i class="el-icon-delete"></i> 删除</span>
          </div>
        </el-col>
      </el-row>

    </div>
    <!--添加-->
    <el-row :span="24" class="submit">
      <el-button type="success" @click.native="getSubmit()">添加新的地址</el-button>
    </el-row>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data () {
      return {
        activeName: '1',
        input: '',
        addrList: []
      }
    },
    methods: {
      getSubmit () { // 跳转到添加地址界面
        this.$router.push('/user/newaddress')
      },
      deleteAdd (addId) {
        this.$http.post('http://218.104.153.143:8089/numberone-auth/busiUserAddr/deleteAddr.shtml', {token: this.$store.state.token, id: addId}, {
          headers: {'Content-Type': 'application/x-www-form-urlencoded'},
          emulateJSON: true
        }).then((data) => {
          this.$message({
            message: '删除成功',
            type: 'success',
            duration: 1000,
            showClose: false
          })
          this.$router.push('/user')
        }, (ne) => {
          this.$message({
            message: '网络错误',
            type: 'error',
            duration: 1000,
            showClose: false
          })
        })
      }
    },
    created () {
      let that = this
      //  获取用户地址信息
      this.$http.post('http://218.104.153.143:8089/numberone-auth/busiUserAddr/userAddrList.shtml', {token: this.$store.state.token}, {
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        emulateJSON: true
      }).then((data) => {
        that.addrList = data.body.addrList
      }, (ne) => {
        this.$message({
          message: '网络错误',
          type: 'error',
          duration: 1000,
          showClose: false
        })
      })
    }
  }
</script>

<style lang="scss" type="stylesheet/scss">
  .userAddress{
    background-color:#f5f3f3;
    height: 615px;
    text-align: left;
    .green{
      color:green;
    }
  .addressMain{
    font-size:14px;
    line-height:30px;
    color:#686868;
  .item{
    background-color: #fff;
    margin-bottom: 10px;
    padding: 5px 0;
  .el-col{
    padding: 0 15px;
  }
  .itemTop{
    display:flex;
    .itemTopContent{
      flex:1;
    }
  }
  .itemFoot{
    border-top: 1px solid #e3e3e3;
    padding: 5px 15px;
    display:flex;
    font-size:14px;
  .itemFootLeft{

  }
  .itemFootContent{
    flex:1;
  }
  .itemFootRight{
    span{
      margin-left: 10px;
    }
  }
  }
  }
  }

  .submit{
    margin-top: 20px;
    padding: 0 15px;
  .el-button--success{
    width: 100%;
    }
  }
  }

</style>
